<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="referrer" content="no-referrer" />
	<!--<meta name="referrer" content="never">-->
	<title>播放</title>
	<script src="/js/Util.js"></script>
	<script src="/js/shareRoom.js"></script>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js"></script>
	<link href="https://unpkg.com/video.js@7.20.3/dist/video-js.css" rel="stylesheet">
</head>
<style>
	*{
		padding: 0;
		margin: 0;
		background-color: rgba(20,20,22);
	}
	#mask *{
		background-color: transparent;
	}
	.loadingEight{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin: 0 auto;
		position: relative;
		border:5px solid #b7f;
		-webkit-animation: turn 2s linear infinite;
	}
	.loadingEight span{
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #b7f;
		position: absolute;
		left: 50%;
		margin-top: -15px;
		margin-left: -15px;
		background-color: transparent;
		-webkit-animation: changeBgColor 2s linear infinite;
	}
	@-webkit-keyframes changeBgColor{
		0%{
			background: #b7f;
		}
		50%{
			background: #83f;
		}
		100%{
			background: #b7f;
		}
	}
	@-webkit-keyframes turn{
		0%{
			-webkit-transform: rotate(0deg);
			border-color: #b7f;
		}
		50%{
			-webkit-transform: rotate(180deg);
			border-color: #83f;
		}
		100%{
			-webkit-transform: rotate(360deg);
			border-color: #b7f;
		}
	}
	.video-js{
		display: contents;
	}
	.video-js .vjs-duration{
		display: block;
	}
	.video-js .vjs-current-time{
		display: block;
	}
	.vjs-progress-control{
		pointer-events: none;
	}
	.vjs-progress-control *{
		pointer-events: none;
	}
	.vjs-play-control{
		pointer-events: none;
	}
	.vjs-play-control *{
		pointer-events: none;
	}
</style>
<script src="https://unpkg.com/video.js@7.20.3/dist/video.js"></script>
<script src="/js/videojs_zh_CN.js"></script>
<script src="/js/flv.min.js"></script>
<script src="/js/timer.js"></script>
<body>
<video id="video" width="100%" controls poster="//www.toopic.cn/public/uploads/small/163420460946416342046098.jpg">
	<p class="vjs-no-js">
		To view this video please enable JavaScript, and consider upgrading to a
		web browser that
		<a href="https://videojs.com/html5-video-support/" target="_blank">
			supports HTML5 video
		</a>
	</p>
</video>
</body>
<script type="text/javascript">
	eruda.init();
	if (typeof(WebSocket) == "undefined"){
		alert("您的浏览器不支持该功能");
		window.close();
	}

	var source = {};
	let rst = [( ${result} )];
	if (rst.code != 0){
		alert(rst.msg);
		window.close();
	}
	else{
		var video = document.getElementById("video");
		video.addEventListener("play", () => {$(".vjs-poster").css("display", "none")});
		video.height = window.innerHeight;
		video.source = function(src) {
			if (src === undefined) {
				return source;
			}
			if (source.src != undefined && source.src != src.src) {
				location.reload();
			}
			source = src;
			loadVideo(src.src, src.type);
		}
		var videoController = new VideoController(video, false);
		var connect = new shareRoomConnect(rst.data, videoController);
		connect.addEventListener("open", function() {
			/*videoController.loadVideo = true;
			connect.sendPackage(videoController);*/
		})
		connect.addEventListener("close", function() {
			alert("连接关闭");
		});
	}

	function loadVideo(src, videoType){
		if (videoType == "hls" || videoType == "m3u8"){
			$(video).addClass("video-js vjs-default-skin vjs-big-play-centered vjs-16-9");
			var hlsPlayer = videojs(video, {
				bigPlayButton: false, // 显示播放按钮
				textTrackDisplay: false,
				posterImage: true,
				language: 'zh-CN',
				autoplay: true,
				preloaded: "auto",
				errorDisplay: false,
				controlBar: {
					children: [
						{name: 'playToggle'}, // 播放按钮
						{name: 'currentTimeDisplay'}, // 当前已播放时间
						{name: 'progressControl'}, // 播放进度条
						{name: 'durationDisplay'}, // 总时间
						{ // 倍数播放
							name: 'playbackRateMenuButton',
							'playbackRates': [0.5, 1, 1.5, 2, 2.5]
						},
						{
							name: 'volumePanel', // 音量控制
							inline: false, // 不使用水平方式
						},
						{name: 'FullscreenToggle'} // 全屏
					]
				}, // 显示控件
				fluid: true,
				sources: [{
					type: "application/x-mpegURL",
					src: src,
					poster: "//www.toopic.cn/public/uploads/small/163420460946416342046098.jpg"
				}]
			},
			function(){
				this.on('loadedmetadata',function(){
					console.log('loadedmetadata');
					hlsPlayer.play();
				});
				// 监听错误事件(如果其中一个ts文件获取失败，需要进行重试次数限制，并且重新加载视频流，以保证视频能够继续播放)
				this.tech_.on('retryplaylist', (a,b,c) => {
					console.log("ts文件获取失败404.....");
					if (video.buffered.length > 0){
						if (!video.paused && Math.ceil(video.currentTime) >= parseInt(video.buffered.end(0))){
							this.pause();
						}
					}
				})
				this.on('error',function(){
					console.log(this.error());
				})
			});
		}
		else if (videoType=="flv" || videoType=="mp4"){
			if (flvjs.isSupported()) {
				var flvPlayer = flvjs.createPlayer({
					type: videoType,
					url: src
				});
				flvPlayer.attachMediaElement(video);
				flvPlayer.load(); //加载
			}
		}
		else{
			alert("暂不支持，请截图发送管理员添加支持"+videoType);
		}
	}
	/*document.body.onclick = function (){
		video.play();
	}*/
</script>
</html>